<template>
  <div class="container">
    <form class="form">
      <div class="form-item">
        <label class="label" for="method">折旧方法</label>
        <el-select v-model="depreciationMethod" placeholder="请选择折旧方法" size="mini" style="flex-grow: 1;"
          :clearable="true">
          <el-option label="平均年限法" value="平均年限法"></el-option>
        </el-select>
      </div>
      <div class="form-item">
        <label class="label" for="rate">预计残值率</label>
        <el-input v-model="residualValueRate" placeholder="请输入预计残值率" size="mini" style="flex-grow: 1;" type="number" min="0">
          <template #append>%</template>
        </el-input>
      </div>
      <div class="form-item">
        <label class="label" for="dateType">首次折旧时间</label>
        <el-select v-model="depreciationTime" placeholder="请选择首次折旧时间" size="mini" style="flex-grow: 1;"
          :clearable="true">
          <el-option label="入库时间的当月" value="入库时间的当月"></el-option>
          <el-option label="入库时间的次月" value="入库时间的次月"></el-option>
        </el-select>
      </div>
      <div class="form-item">
        <label class="label" for="remark">备注</label>
        <el-input type="textarea" v-model="remark" placeholder="请输入备注" maxlength="50" show-word-limit size="mini"
          rows="3" style="flex-grow: 1;" />
      </div>
      <div class="action">
        <el-button type="primary" size="mini" @click="handleSubmit">
          保存
        </el-button>
      </div>
    </form>
    <el-dialog v-model="dialogVisible" title="提示" width="300px" :close-on-click-modal="false">
      <p>{{ dialogMessage }}</p>
      <template #footer>
        <el-button type="primary" size="mini" @click="dialogVisible = false">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed } from "vue";
export default {
  setup() {
    const depreciationMethod = ref("");
    const residualValueRate = ref("");
    const depreciationTime = ref("");
    const remark = ref("");
    const dialogVisible = ref(false);
    const dialogMessage = ref("");

    const isFormValid = computed(() => {
      return (
        depreciationMethod.value &&
        residualValueRate.value &&
        depreciationTime.value
      );
    });
    const handleSubmit = () => {
      if (isFormValid.value) {
        dialogMessage.value = "保存成功！";
        dialogVisible.value = true;
      } else {
        dialogMessage.value = "请完整填写表单。";
        dialogVisible.value = true;
      }
    };
    return {
      depreciationMethod,
      residualValueRate,
      depreciationTime,
      remark,
      dialogVisible,
      dialogMessage,
      isFormValid,
      handleSubmit,
    };
  },
};
</script>


<style scoped>
.container {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  align-items: center;
  height: 100vh;
  padding: 10px;
}

.form {
  padding: 15px;
  border-radius: 6px;
  width: 400px;


}

.form-title {
  text-align: center;
  margin-bottom: 10px;
  font-size: 18px;
}

.form-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.label {
  text-align: right;
  margin-right: 8px;
  font-weight: bold;
  width: 120px;
  color: #555;
  font-size: 13px;
}

.labels {
  text-align: right;
  margin-right: 8px;
  font-weight: bold;
  width: 90px;
  color: #555;
  font-size: 13px;
}

.el-button {
  padding: 5px 10px;
}

.action {
  text-align: center;
  margin-top: 10px;
}
</style>
